<template>
  <el-header class="horizontal-menu" >
    <div class="menu-container">
      <div class="menu-main">
        <el-menu
          mode="horizontal"
          :default-active="activeIndex"
          class="custom-horizontal-menu"
          :unique-opened="true"
          @select="handleSelect"
        >
          <el-menu-item index="0" @click="menuHandler('')">
            <i class="el-icon-s-home menu-icon"></i>
            <span class="menu-text">首页</span>
          </el-menu-item>

          <el-submenu index="1" popper-class="custom-submenu">
            <template slot="title">
              <i class="el-icon-user-solid menu-icon"></i>
              <span class="menu-text">个人中心</span>
            </template>
            <el-menu-item index="1-1" @click="menuHandler('updatePassword')">
              <i class="el-icon-lock menu-icon"></i>
              修改密码
            </el-menu-item>
            <el-menu-item index="1-2" @click="menuHandler('center')">
              <i class="el-icon-document menu-icon"></i>
              个人信息
            </el-menu-item>
          </el-submenu>

          <el-submenu
            v-for="(menu, index) in activeBackMenu"
            :key="index"
            :index="(index + 2).toString()"
            popper-class="custom-submenu"
          >
            <template slot="title">
              <i :class="[menuIcon(index), 'menu-icon']"></i>
              <span class="menu-text">{{ menu.menu }}</span>
            </template>
            <el-menu-item
              v-for="(child, childIndex) in menu.child"
              :key="childIndex"
              :index="`${index + 2}-${childIndex}`"
              @click="menuHandler(child.tableName)"
            >
              <!-- <i class="el-icon-arrow-right menu-icon"></i> -->
              {{ child.menu }}
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </div>

      <!-- <div class="menu-extra">
        <div class="menu-profile">
          <i class="el-icon-user profile-icon"></i>
          <span
            >{{ $storage.get("role") }} {{ $storage.get("adminName") }}</span
          >
        </div>
      </div> -->
    </div>
  </el-header>
</template>

<script>
import menu from "@/utils/menu";
export default {
  data() {
    return {
      activeIndex: "0",
      menuList: [],
      dynamicMenuRoutes: [],
      role: "",
      icons: [
        "el-icon-s-cooperation",
        "el-icon-s-order",
        "el-icon-s-platform",
        "el-icon-s-fold",
        "el-icon-s-unfold",
        "el-icon-s-operation",
        "el-icon-s-promotion",
        "el-icon-s-release",
        "el-icon-s-ticket",
        "el-icon-s-management",
        "el-icon-s-open",
        "el-icon-s-shop",
        "el-icon-s-marketing",
        "el-icon-s-flag",
        "el-icon-s-comment",
        "el-icon-s-finance",
        "el-icon-s-claim",
        "el-icon-s-custom",
        "el-icon-s-opportunity",
        "el-icon-s-data",
        "el-icon-s-check",
        "el-icon-s-grid",
        "el-icon-menu",
        "el-icon-chat-dot-square",
        "el-icon-message",
        "el-icon-postcard",
        "el-icon-position",
        "el-icon-microphone",
        "el-icon-close-notification",
        "el-icon-bangzhu",
        "el-icon-time",
        "el-icon-odometer",
        "el-icon-crop",
        "el-icon-aim",
        "el-icon-switch-button",
        "el-icon-full-screen",
        "el-icon-copy-document",
        "el-icon-mic",
        "el-icon-stopwatch",
      ],
      menulistStyle: "${template.back.menulist.menulistStyle}",
      menulistBorderBottom: {},
    };
  },
  mounted() {
    const menus = menu.list();
    if (menus) {
      this.menuList = menus;
    } else {
      let params = {
        page: 1,
        limit: 1,
        sort: "id",
      };
      this.$http({
        url: "menu/list",
        method: "get",
        params: params,
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.menuList = JSON.parse(data.data.list[0].menujson);
          this.$storage.set("menus", this.menuList);
        }
      });
    }
    this.role = this.$storage.get("role");
  },
  created() {
    setTimeout(() => {
      this.menulistStyleChange();
    }, 10);
    this.icons.sort(() => {
      return 0.5 - Math.random();
    });
    this.lineBorder();
  },
  computed: {
    activeBackMenu() {
      const roleMenu = this.menuList.find(
        (item) => this.role === item.roleName
      );
      return roleMenu ? roleMenu.backMenu : [];
    },
  },
  methods: {
    menuIcon(index) {
      return this.icons[index % this.icons.length];
    },
    handleSelect(index) {
      this.activeIndex = index.split("-")[0];
    },
    lineBorder() {
      let style = "${template.back.menulist.menulistStyle}";
      let w = "${template.back.menulist.menulistLineWidth}";
      let s = "${template.back.menulist.menulistLineStyle}";
      let c = "${template.back.menulist.menulistLineColor}";
      if (style == "vertical") {
        this.menulistBorderBottom = {
          borderBottomWidth: w,
          borderBottomStyle: s,
          borderBottomColor: c,
        };
      } else {
        this.menulistBorderBottom = {
          borderRightWidth: w,
          borderRightStyle: s,
          borderRightColor: c,
        };
      }
    },
    menuHandler(name) {
      let router = this.$router;
      name = "/" + name;
      router.push(name);
    },
    // 菜单
    setMenulistHoverColor() {
      let that = this;
      return;
      
    },
    setMenulistIconColor() {
      this.$nextTick(() => {
        document
          .querySelectorAll(
            ".menulist .el-submenu__title .el-submenu__icon-arrow"
          )
          .forEach((el) => {
            el.style.color = "${template.back.menulist.menulistIconColor}";
          });
      });
    },
    menulistStyleChange() {
      this.setMenulistIconColor();
      this.setMenulistHoverColor();
      this.setMenulistStyleHeightChange();
      let str = "2";
      if (1 == str) {
        this.$nextTick(() => {
          document
            .querySelectorAll(".el-container .el-container")
            .forEach((el) => {
              el.style.display = "block";
              el.style.paddingTop = "60px"; // header 高度
            });
          document.querySelectorAll(".el-aside").forEach((el) => {
            el.style.width = "100%";
            el.style.height = "auto";
            el.style.paddingTop = "0";
          });
          document
            .querySelectorAll(".index-aside .index-aside-inner")
            .forEach((el) => {
              el.style.paddingTop = "0";
              el.style.width = "100%";
            });
        });
      }
      if (2 === str) {
        this.$nextTick(() => {
          document
            .querySelectorAll(".index-aside .index-aside-inner")
            .forEach((el) => {
              el.style.paddingTop = "60px";
            });
        });
      }
    },
    setMenulistStyleHeightChange() {
      return;
      this.$nextTick(() => {
        document
          .querySelectorAll(".menulist-item>.el-menu--horizontal>.el-menu-item")
          .forEach((el) => {
            el.style.height = "${template.back.menulist.menulistHeight}";
            el.style.lineHeight = "${template.back.menulist.menulistHeight}";
          });
        document
          .querySelectorAll(
            ".menulist-item>.el-menu--horizontal>.el-submenu>.el-submenu__title"
          )
          .forEach((el) => {
            el.style.height = "${template.back.menulist.menulistHeight}";
            el.style.lineHeight = "${template.back.menulist.menulistHeight}";
          });
      });
    },
  },
};
</script>
<style scoped>
.horizontal-menu {

  width: 100%;
  height:80px;
  /* margin-top: 80px;  将5rem改为固定像素值 */
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 0 30px;
  overflow-x: auto;   /* 水平滚动替代隐藏 */
  /* overflow-y: hidden; */
  display: flex;      /* 新增flex布局 */
  flex-wrap: nowrap;  /* 禁止换行 */
  -webkit-overflow-scrolling: touch; /* 移动端滚动优化 */
}

/* .menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  min-width: fit-content;  
} */

.custom-horizontal-menu {
  border-bottom: none;
  background: transparent;
}

.custom-horizontal-menu >>> .el-submenu__title,
.custom-horizontal-menu >>> .el-menu-item {
  display: flex;
  align-items: center;
  height: 60px;
  line-height: 60px;
  margin: 0 15px;
  border-bottom: 3px solid transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-horizontal-menu >>> .el-menu-item.is-active,
.custom-horizontal-menu >>> .el-submenu.is-active .el-submenu__title {
  border-bottom-color: #409eff;
  color: #409eff !important;
}

.custom-horizontal-menu >>> .el-menu-item:hover,
.custom-horizontal-menu >>> .el-submenu__title:hover {
  background: rgba(64, 158, 255, 0.08);
  transform: translateY(-2px);
}

.menu-icon {
  margin-right: 8px;
  font-size: 18px;
}

.menu-text {
  font-weight: 500;
  letter-spacing: 0.5px;
}

.menu-extra {
  display: flex;
  align-items: center;
  gap: 20px;
}

.menu-profile {
  display: flex;
  align-items: center;
  padding: 8px 15px;
  background: rgba(64, 158, 255, 0.1);
  border-radius: 8px;
  transition: background 0.3s ease;
}

.menu-profile:hover {
  background: rgba(64, 158, 255, 0.2);
}

.profile-icon {
  margin-right: 8px;
  color: #409eff;
}

/* 下拉菜单样式 */
.custom-submenu {
  margin-top: 8px !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.custom-submenu .el-menu-item {
  min-width: 160px;
  /* padding: 12px 20px !important; */
  transition: all 0.2s ease;
}

.custom-submenu .el-menu-item:hover {
  background: rgba(64, 158, 255, 0.08) !important;
  padding-left: 25px !important;
}

@media (max-width: 1200px) {
  .horizontal-menu {
    padding: 0 15px;
  }

  .custom-horizontal-menu >>> .el-submenu__title,
  .custom-horizontal-menu >>> .el-menu-item {
    margin: 0 10px;
  }

  .menu-text {
    font-size: 14px;
  }
}
</style>
